<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import QRCode, { type QRCodeToDataURLOptions } from 'qrcode'; // 引入QRCodeToDataURLOptions类型

const qrCodeSize = 300; // 设置二维码的大小

const qrCodeUrl = ref('');

onMounted(async () => {
	const textToEncode = 'Your Text Here'; // 你想要生成二维码的文本
	try {
		const options: QRCodeToDataURLOptions = { width: qrCodeSize }; // 显式指定options的类型
		const generatedQRCode = await QRCode.toDataURL(textToEncode, options);
		qrCodeUrl.value = generatedQRCode;
	} catch (error) {
		console.error('Error generating QR code:', error);
	}
});
</script>
<template>
	<el-card class="main-content">
		<template #header>
			<span>二维码（qrcode）</span>
		</template>
		<div>
			<img :src="qrCodeUrl" alt="QR Code" :style="{ width: qrCodeSize, height: qrCodeSize }" />
		</div>
	</el-card>
</template>
<style lang="scss" scoped></style>
